<template>

    <template v-if="props.card == null">
        卡面已被删除
    </template>
    <template v-else-if="lCardType == undefined">
        无法识别该卡面类型{{ props.card?.type }},请搜索该卡面类型并使用导入功能
    </template>
    <template v-else>
        <div style="display: flex;flex-wrap: wrap; justify-content:flex-start;height: 100%; align-content: flex-start;"
            :style="`flex-direction: ${col ? 'column' : 'row'};`" >
            <DefaultPart :id style="width:240px;margin: 3px;" v-if="props.cover" :card="props.card"
                :part="lCardType.coverPart"></DefaultPart>
            <template v-for="part in lCardType.parts">
                <DefaultPart :id style="width:240px;margin: 3px; max-height: 33dvh; overflow: auto;" title :card="props.card" :part="part"></DefaultPart>
            </template>
        </div>
    </template>
</template>

<script setup lang="ts">
import cardType from '@/ts/cardType/cardType';
import DefaultPart from './part/DefaultPart.vue';
import { computed } from 'vue';
import { useRoom } from '@/stores/room';
import type card from '@/ts/cardData/card';

const props = defineProps<{
    card?:card,
    cardType?:cardType
    cover?:boolean
    col?:boolean
    id:string
}>()
const lCardType = computed(() => {
    if (props.cardType != undefined) {
        return props.cardType
    } else {
        return useRoom().getType(props.card?.type)
    }
})
</script>

<style scoped></style>